<template>
  <b-container fluid>
    <b-row class="mt-2">
      <b-col mb="2" offset-md="5" lg="6" offset-lg="3" sm="10">

        <b-form-group label="文章标题：" class="text-left">
          <b-form-input
          v-model="$v.artical.title.$model"
          type="text"
          size="lg"
          class="mb-1"
          placeholder="请输入文章标题"
          ></b-form-input>
          <b-form-invalid-feedback :state="validateState('title')">
            您至少需要输入3个字
          </b-form-invalid-feedback> 
        </b-form-group>

        <b-form-group label="文章正文：" class="text-left">
          <b-form-textarea
            v-model="$v.artical.content.$model"
            size="md"
            placeholder="请在此处编辑文章正文"
            rows="30"
            class="mb-1"
          ></b-form-textarea>
          <b-form-invalid-feedback :state="validateState('content')">
            您至少需要输入5个字
          </b-form-invalid-feedback> 
        </b-form-group> 
        
        <b-form-group label="文章简介：" class="text-left">
          <b-form-textarea
            v-model="artical.desc"
            size="md"
            placeholder="请在此处编辑文章简介（非必填）"
            rows="3"
          ></b-form-textarea>
        </b-form-group>

        <b-form-group>
          <b-button 
            variant="outline-primary" 
            @click="publishBlog"
            block
          >发布博客</b-button>
        </b-form-group>

      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'
import requestService from '@/service/requestService'
import { mapState } from 'vuex';
export default {
  data() {
    return {
      artical: {
        title: '',
        content: '',
        author: '',
        desc: '',
      },
    }
  },
  computed: mapState({
    userName: (state) => state.userModule.userName,
  }),
  validations: {
    artical: {
      title: {
        required,
        minLength: minLength(3),
      },
      content : {
        required,
        minLength: minLength(5),
      },
    }
  },

  //设置背景为灰色
  beforeCreate () {
    this.$nextTick(()=>{
      document.body.setAttribute('style', 'background:#EAECF1')
    })
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy () {
    document.body.removeAttribute('style')
  },
  
  methods: {
    validateState(name) {
      const { $dirty, $error } = this.$v.artical[name]
      return $dirty? !$error : null
    },
    publishBlog() {
      //验证数据
      this.$v.artical.$touch()
        if (this.$v.artical.$anyError) {
          return ;
        }
      //请求
      var userRequest = {
        author : this.userName,
        title : this.artical.title,
        content : this.artical.content,
        desc : this.artical.desc,
      }
      requestService.post('writeArticle', userRequest).then((res) => {
        this.$bvToast.toast(res.data.msg, {
          title: '',
          variant: 'info',
          solid: true,
        })
        //this.$router.replace({ name: "login"})
      }).catch((err) => {
        console.log(err)
        this.$bvToast.toast(err.response.data.msg, {
          title: '数据验证错误',
          variant: 'danger',
          solid: true,
        })
      })
    }
  },
}
</script>

<style scoped>
</style>